<template>
		<el-container>
			<el-aside width="200px">
				<el-select placeholder="请选择">
			    <el-option
			      v-for="(item, index) in options"
            :key="index"
            value="1"
            :label="item.label">
			    </el-option>
			  </el-select>
				<el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-menu-item v-for="(item, index) in data" :key="index" :index="item.label" @click="getBugDetail(index)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.label}}</span>
          </el-menu-item>
        </el-menu>
			</el-aside>
		  <el-container>
		    	<Bug :bugNum="tBug"></Bug> 
		  </el-container>
		</el-container>
</template>
<script>
import Bug from "./Bug";
import axios from "axios";
import { getTime } from "@/api/common/getTime";
export default {
  name: "Main",
  created() {
    let time = "2018-06-18";
    this.getT(time);
  },
  components: {
    Bug
  },
  data() {
    return {
      data: [
        {
          label: "bug 1：今天上午"
        },
        {
          label: "bug 2：昨天"
        },
        {
          label: "bug 3：6月10日"
        },
        {
          label: "bug 4：6月10日"
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      options: [
        {
          label: "全部"
        },
        {
          label: "已完成"
        },
        {
          label: "已修改"
        },
        {
          label: "待修改"
        }
      ],
      tBug: 0
    };
  },
  methods: {
    getT(time) {
      getTime(time);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getBugDetail(index) {
      const url = "api/bugs/bugInfo.html";
      axios
        .post(url, {
          bugs_id: index
        })
        .then(res => {
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.el-menu-vertical-demo
  text-align left
</style>